<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../plugins/layui/css/layui.css" media="all" />
		<link rel="stylesheet" href="../css/global.css" media="all">
		<link rel="stylesheet" href="../css/table.css" />
	</head>
	<body>
		<div class="admin-main">

			<blockquote class="layui-elem-quote">
				
				<form class="layui-form" action="" style="align-content: center;margin-top: 10px;">
					<table class="admin-table">
						<tr>
							<td style="width: 70px;text-align: center;">订单状态</td>
							<td id="orderStatus" align="center">
								<div class="layui-input-inline">
									<select name="selectOrderStatus" id="selectOrderStatus">
										<option value=""></option>
									</select>
								</div>
						    </td>
						    <td style="width: 70px;text-align: center;">是否删除</td>
						    <td id="deleteStatus" align="center">
								<div class="layui-input-inline">
									<select name="deleteStatus">
										<option value=""></option>
									</select>
								</div>
						    </td>
							<td style="width: 70px;text-align: center;">开始时间</td>
							<td><input class="layui-input" onclick="layui.laydate({elem: this, istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" readonly="readonly"/></td>
							<td style="width: 70px;text-align: center;">结束时间</td>
							<td><input class="layui-input" onclick="layui.laydate({elem: this, istime: true, format: 'YYYY-MM-DD hh:mm:ss'})" readonly="readonly"/></td>
						</tr>
					</table>
				<br>
				<a href="javascript:;" class="layui-btn layui-btn-small" id="add">
					<i class="layui-icon">&#xe608;</i> 添加
				</a>
				<a href="#" class="layui-btn layui-btn-small" id="delete">
					<i class="layui-icon">&#xe640;</i> 删除
				</a>
				<a href="#" class="layui-btn layui-btn-small">
					<i class="layui-icon">&#xe642;</i> 修改
				</a>
				<a href="javascript:;" class="layui-btn layui-btn-small" id="add">
					<i class="layui-icon">&#xe615;</i> 搜索
				</a>
				<a href="javascript:;" class="layui-btn layui-btn-small" id="add">
					<i class="layui-icon">&#xe650;</i> 取消
				</a>
				</form>
			</blockquote>
			
				
			<fieldset class="layui-elem-field">
				<legend>数据列表</legend>
				<div class="layui-field-box layui-form">
					<table class="layui-table admin-table" id="firstTable">
						<thead>
							<tr>
								<th style="width: 10px;"><a href="javascript:;">
										<i class="layui-icon">&#xe600;</i>
								</a></th>
								<th>订单号</th>
								<th>下单用户</th>
								<th>联系电话1</th>
								<th>联系电话2</th>
								<th>区域</th>
								<th>地址</th>
								<th>订单状态</th>
								<th>是否删除</th>
								<th>订单金额</th>
								<th>品项数量</th>
								<th>备注</th>
								<th>创建时间</th>
								<th>更新时间</th>
							</tr>
						</thead>
						<tbody id="content"></tbody>
					</table>
				</div>
			</fieldset>
			<div class="admin-table-page">
				<div id="paged" class="page">
				</div>
			</div>
		</div>
		<!--模板第一层-->
		<script type="text/html" id="tpl">
			{{# layui.each(d.rows, function(index, item){ }}
					<tr>
						<td><a href="javascript:;" data-opt="expand">
							<i id="iconBtn" class="layui-icon">&#xe600;</i>
							</a></td>
						<td>{{ item.id }}</td>
						<td>{{ item.userName }}</td>
						<td>{{ item.phone1 }}</td>
						<td>{{ item.phone2 }}</td>
						<td>{{ item.area }}</td>
						<td>{{ item.address }}</td>
						<td>{{ item.status }}</td>
						<td>{{ item.deleteFlag }}</td>
						<td>{{ item.totalMoney }}</td>
						<td>{{ item.itemCount }}</td>
						<td>{{ item.remark }}</td>
						<td>{{ item.createDatetime }}</td>
						<td>{{ item.updateDatetime }}</td>
					</tr>
			{{# }); }}
		</script>
		<!--模板第二层-->
		<script type="text/html" id="secTpl">
			{{# layui.each(d.rows, function(index, item){ }}
					<tr>
						<td>{{item.itemName}}</td>
						<td>{{item.price}}</td>
						<td>{{item.countPrice}}</td>
						<td>{{item.wholesalePrice}}</td>
						<td>{{item.countWholesalePrice}}</td>
						<td>{{item.discountPrice}}</td>
						<td>{{item.countDiscountPrice}}</td>
						<td>{{item.count}}</td>
						<td>{{item.unit}}</td>
					</tr>
			{{# }); }}
		</script>
	<script type="text/javascript" src="../plugins/layui/layui.js"></script>
	<script>
			layui.config({
				base: '../js/'
			});

			layui.use(['datagrid', 'form','laytpl','laydate'], function() {
				var $ = layui.jquery,
				datagrid = layui.datagrid(),
				laytpl = layui.laytpl;
				layerTips = parent.layer === undefined ? layui.layer : parent.layer, //获取父窗口的layer对象
				layer = layui.layer, //获取当前窗口的layer对象
				form = layui.form();
				datagrid.init({
					url: '../datas/orderList.json', //地址
					elem: '#content', //内容容器
					params: { //发送到服务端的参数
					},
					type: 'GET',
					tempElem: '#tpl', //模块容器
					pageConfig: { //分页参数配置
						elem: '#paged', //分页容器
						pageSize: 1 //分页大小
					},
					success: function() { //渲染成功的回调
						//alert('渲染成功');
					},
					fail: function(msg) { //获取数据失败的回调
						//alert('获取数据失败')
					},
					complate: function() { //完成的回调
						//绑定所有展开按钮事件
						$('#content').children('tr').each(function() {
							var $that = $(this);
							$that.children('td:first-child').children('a[data-opt=expand]').on('click', function() {
								if($that.children('td:first-child').children('a[data-opt=expand]').children('i').attr("style")){
									$that.children('td:first-child').children('a[data-opt=expand]').children('i').removeAttr("style");
									$that.next().remove();
								}else{
									$that.children('td:first-child').children('a[data-opt=expand]').children('i').attr("style","font-size: 20px; color: #009F95;'")
									var con=$('#subTable').clone();
									con.attr("id","subTable"+$that.index());
									con.removeAttr("hidden");
									$.ajax({
										dataType:'json',
										url:"../datas/orderSubList.json",
										async:true,
										success:function(obj){
										var getTpl = secTpl.innerHTML;
										laytpl(getTpl).render(obj, function(html){
										  con.find("[name='subcontent']").html(html);
										});
										var tr=$("<tr></tr>");
										var td=$("<td colspan=14></td>");
									
										td.append(con);
										tr.append(td);
										$that.after(tr);
										}
									});
								}
							});
						});
						//获取订单状态
						$('#orderStatus').on('click',function(){
							$.ajax({
								url : '../datas/orderStatus.json',
								dataType : 'json',
								success : function(obj) {
									var content=null;
									for (var i=0;i<obj.length;i++) {
										document.getElementById("selectOrderStatus").appendChild("obj[i].id","obj[i].name");
									}
								}
							});
						});
					}
				});
			});
	</script>
	</body>
	<div id="subTable" class="layui-field-box layui-form" hidden="hidden">
	<table class="layui-table admin-table">
		<thead id="thread">
			<tr align="center">
			<th>品项名称</th>
			<th>零售价</th>
			<th>零售价数量</th>
			<th>整件价</th>
			<th>整件价数量</th>
			<th>优惠价</th>
			<th>优惠价数量</th>
			<th>总数</th>
			<th>单位</th>
			</tr>
		</thead>
		<tbody id="subcontent" name="subcontent"></tbody>
	</table>
	</div>
</html>
